import React from 'react';
import './InfoCard.less';

// 添加文本截断工具函数
const truncateText = (text, maxLength) => {
  // Add null/undefined check
  if (!text) return '';
  
  if (text.length > maxLength) {
    return text.substring(0, maxLength) + '...';
  }
  return text;
};

const InfoCard = ({ data, statusMap, typeMap, onShowDetail }) => {
  return (
    <div className="info-card" onClick={() => onShowDetail(data)}>
      <div className="card-header">
        <div className="header-main">
          <h3 className="title">{data.title}</h3>
          <div className="tags">
            <span className={`type-tag ${data.help_type}`}>
              {data.helpType === 'offline' ? '线下' : '线上'}
            </span>
            <span className={`status-tag ${data.status}`}>
              {data.status === 'pending' ? '进行中' : '已结束'}
            </span>
          </div>
        </div>
        <div className="create-time">
          {new Date(data.created_at).toLocaleDateString()}
        </div>
      </div>

      <div className="card-content">
        <div className="content-row">
          <span className="label">科目需求:</span>
          <span className="value">{data.subject}</span>
        </div>

        <div className="content-row">
          <span className="label">学生性别:</span>
          <span className="value">{data.gender === 'Male' ? '男' : '女'}</span>
          <span className="label" style={{marginLeft: '20px'}}>学生年级:</span>
          <span className="value">{data.grade}</span>
        </div>

        <div className="content-row">
          <span className="label">授课频率:</span>
          <span className="value">{data.frequency}</span>
          <span className="label" style={{marginLeft: '20px'}}>每次时长:</span>
          <span className="value">{data.duration}</span>
        </div>

        <div className="content-row">
          <span className="label">学生居住区域:</span>
          <span className="value">{data.location}</span>
        </div>
        <div className="content-row">
          <span className="label">就读学校:</span>
          <span className="value">{data.school}</span>
        </div>
        <div className="content-row">
          <span className="label">备注信息:</span>
          <span className="value description" title={data.description}>
            {truncateText(data.description, 25)}
          </span>
        </div>
      </div>

      <div className="card-footer">
        <button className="detail-btn">了解详情</button>
      </div>
    </div>
  );
};

export default InfoCard;